<template>
  <div class="left-bar">
    <div class="logo">
      <img src="../../assets/logo.png" alt="" class="logo-img">
      <p class="logo-title">大漠浩瀚云财务管理系统</p>
    </div>

    <div class="avatar">
      <img src="../../assets/avatar.png" alt="" class="avatar-img">
      <p class="avatar-title">演示账号</p>
    </div>

    <ul class="menu-list">
      <li class="menu-list-item">
        <router-link to="/homepage">
          <i class="fa fa-home"></i>首页
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link to="/voucher">
          <i class="fa fa-list-alt"></i>凭证
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link to="/assets">
          <i class="fa fa-money"></i>固定资产
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link to="/report">
          <i class="fa fa-briefcase"></i>报表
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link to="/contract">
          <i class="fa fa-file"></i>合同
        </router-link>
      </li>
      <li class="menu-list-item">
        <router-link to="/setting">
          <i class="fa fa-cog"></i>设置
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import 'font-awesome/css/font-awesome.css'

  export default {}
</script>

<style>
  .left-bar {
    position: absolute;
    width: 300px;
    height: 100%;
    background: #2b2b2b;
    color: #fff;
  }

  .left-bar .logo, .left-bar .avatar {
    text-align: center;
  }

  .left-bar .logo .logo-img {
    width: 90px;
    margin: 60px 0 30px 0;
  }

  .left-bar .logo .logo-title {
    font-size: 18px;
  }

  .left-bar .avatar .avatar-img {
    width: 50px;
    margin: 50px 0 20px 0;
  }

  .left-bar .menu-list {
    margin-top: 50px;
  }

  .left-bar .menu-list .menu-list-item {
    height: 70px;
    line-height: 70px;
    color: #a9b0bb;
  }

  .left-bar .menu-list .menu-list-item a {
    display: block;
    padding-left: 100px;
    width: 200px;
    height: 70px;
    line-height: 70px;
  }

  .left-bar .menu-list .menu-list-item a i {
    margin-right: 20px;
    font-size: 20px;
  }

  .left-bar .menu-list .menu-list-item .router-link-active {
    background: #f7f7f7;
    color: #34a7ff;
    border-left: 3px solid #34a7ff;
    padding-left: 97px;
  }
</style>
